<template>
  <div class="back">   
    <div class="echart" id="mychart" :style="myChartStyle"></div>
    <el-button type="primary" icon="el-icon-edit" @click="centerDialogVisible = true" circle></el-button>
    <el-dialog
      title="输入数据"
      :visible.sync="centerDialogVisible"
      width="40%"
      center>
      <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="《偷心》战里霞" prop="p1">
          <el-input v-model.number="ruleForm.p1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="《不问天》宋海涛、刘雨婷" prop="p2">
          <el-input  v-model.number="ruleForm.p2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item 
        label="歌曲串烧" prop="p3">
          <el-input v-model.number="ruleForm.p3"></el-input>
        </el-form-item>
        <el-form-item 
        label="舞蹈串烧" prop="p4">
          <el-input v-model.number="ruleForm.p4"></el-input>
        </el-form-item>
        <el-form-item 
        label="《相亲相爱》" prop="p5">
          <el-input v-model.number="ruleForm.p5"></el-input>
        </el-form-item>
        <el-form-item 
        label="《欢聚在一起》" prop="p6">
          <el-input v-model.number="ruleForm.p6"></el-input>
        </el-form-item>
        <el-form-item 
        label="《只要有你》" prop="p7">
          <el-input v-model.number="ruleForm.p7"></el-input>
        </el-form-item>
        <el-form-item 
        label="《我的未来不是梦》" prop="p8">
          <el-input v-model.number="ruleForm.p8"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      ruleForm: {
        p1: "",
        p2: "",
        p3: "",
        p4: "",
        p5: "",
        p6: "",
        p7: "",
        p8: ""
      },
      centerDialogVisible: false,
      xData: ["《偷心》", 
      "《不问天》", 
      "歌曲串烧", 
      "舞蹈串烧", 
      "《相亲相爱》",
      "《欢聚在一起》",
      "《只要有你》",
      "《我的未来不是梦》",
      ], //横坐标
      yData: [], //数据
      myChartStyle: { width: "100%", height: "80%" } //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
          color: [
          '#dd6b66',
          '#759aa0',
          '#e69d87',
          '#8dc1a9',
          '#ea7e53',
          '#eedd78',
          '#73a373',
          '#73b9bc',
          '#7289ab',
          '#91ca8c',
          '#f49f42'
        ],
        xAxis: {
          data: this.xData,
          axisLabel: {
            textStyle: {
                color: '#000',
                fontSize:16,
                
            }
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            itemStyle: {
            normal: {
　　　　　　　　//这里是重点
                color: function(params) {
                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#1c7454','#c23531', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622','#7289ab'];
                    return colorList[params.dataIndex]
                }
            },
          
          },
          label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    formatter: '{c}票',//显示百分号
                    textStyle: { //数值样式
                        color: 'black',//字体颜色
                        fontSize:18//字体大小
            }
        }
          

          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    sure(){
      this.centerDialogVisible = false;
      this.yData = Object.values(this.ruleForm);
      console.log(this.yData);
      this.initEcharts();
    },
  }
};
</script>

<style lang="scss" scoped>
.back{
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    background: url(/src/assets/img/yunwen.jpg);
    overflow: hidden;
  }
  .echart{
    position: absolute;
    top: 10%;
    
  }


</style>